<template>
  <view class="container">
    <uni-forms ref="form" :modelValue="formData" labelWidth="120px" labelPosition="top">
      <view class="hidden-title">信息填写</view>
      <cu-cell-group>
        <uni-forms-item name="">
          <cu-cell title="MAC" placeholder="" :description="formData.cardCode"></cu-cell>
        </uni-forms-item>
        <uni-forms-item name="">
          <cu-cell title="车辆类型" placeholder="" description="危化车辆"></cu-cell>
        </uni-forms-item>
        <uni-forms-item name="bindPlateNumber">
          <cu-cell title="车头车牌" required>
            <input
              v-model="formData.bindPlateNumber"
              class="uni-input text-right"
              style="height: 100%"
              placeholder-class="placeholder__style"
              placeholder="请输入车牌"
              maxlength="10"
            />
          </cu-cell>
        </uni-forms-item>
        <uni-forms-item name="chemicalName">
          <cu-cell
            title="运输介质"
            required
            link
            placeholder="请选择隐患级别"
            :description="formData.chemicalName"
            @click="mediumClick()"
          />
        </uni-forms-item>
      </cu-cell-group>

      <view class="submit-group">
        <button class="u-button-cancel margin-left-xs" type="default" :ripple="true" @click="cancel">取消</button>
        <button class="u-button margin-right-xs" type="primary" :ripple="true" @click="bind">绑定</button>
      </view>
    </uni-forms>

    <medium-picker ref="managerLevelPicker" title="运输介质" :data="mediumData" @confirm="mediumConfirm" />
  </view>
</template>

<script>
import CuCellGroup from '@/components/cu-cell/cu-cell-group.vue'
import CuCell from '@/components/cu-cell/cu-cell.vue'
import MediumPicker from './MediumPicker.vue'
import { mediumList, bindCard, vehicleTypeList } from '../../../api/equipment/device-manage'

export default {
  components: {
    CuCellGroup,
    CuCell,
    MediumPicker
  },
  data() {
    return {
      formData: {
        cardCode: '',
        bindVehicleTypeId: '',
        bindPlateNumber: '',
        chemicalName: '',
        chemicalId: ''
      },
      mediumData: [],
      rules: {
        bindPlateNumber: {
          rules: [
            {
              required: true,
              errorMessage: '必填项不能为空'
            }
          ]
        },
        chemicalName: {
          rules: [
            {
              required: true,
              errorMessage: '必填项不能为空'
            }
          ]
        }
      }
    }
  },
  onLoad(option) {
    console.log('option', option)
    this.formData.cardCode = option.code
    // this.formData.bindVehicleType = option.type;
    this.getId()
  },
  onReady() {
    this.$refs.form.setRules(this.rules)
  },
  beforeDestroy() {},
  methods: {
    async getId() {
      const { rows } = await vehicleTypeList()
      let hazardous = rows.find((d) => {
        return d.typeName === '危化车辆'
      })
      this.formData.bindVehicleTypeId = hazardous.typeId
    },
    getMedium() {
      mediumList().then((res) => {
        this.mediumData = res.data
      })
    },
    mediumClick() {
      this.getMedium()
      this.$refs.managerLevelPicker.open()
    },
    mediumConfirm(obj) {
      this.formData.chemicalId = obj.value
      this.formData.chemicalName = obj.name
    },
    navigateBack() {
      uni.navigateBack()
    },
    cancel() {
      this.navigateBack()
    },
    bind() {
      this.$refs.form.validate().then((res) => {
        bindCard(this.formData).then((res) => {
          console.log('res', res)
          this.$modal.showToast('绑卡成功')
        })
        uni.switchTab({
          url: '/pages/work/index'
        })
      })
    }
  }
}
</script>

<style lang="scss">
.container {
  .background-white {
    background-color: #fff;
    padding: 20rpx 30rpx;
    box-sizing: border-box;

    .uni-forms-item__label {
      color: #333;
      font-size: 30rpx;
    }

    .bor-btm {
      display: flex;
      border-bottom: 1px solid #d5d7e3;
    }

    .photo {
      display: flex;
      justify-content: space-between;

      image {
        width: 214rpx;
        height: 214rpx;
      }
    }
  }
}

.hidden-title {
  background: #f5f5f5;
  padding: 20rpx;
  color: #999;
}

.bor-top {
  border-top: 20rpx solid #f5f5f5;
}

.bottom {
  margin-bottom: 120px;
}

.submit-group {
  background: #fff;
  z-index: 9;
  padding: 30px;
}

// .level-list {
// 	display: flex;
// 	justify-content: right;

// 	.level-item {
// 		display: flex;
// 		align-items: center;
// 		margin-left: 60rpx;
// 		color: #333;
// 		line-height: 42rpx;

// 		.icon-style {
// 			width: 36rpx;
// 			height: 36rpx;
// 			margin-right: 10rpx;
// 		}
// 	}
// }
</style>
